@layout("/common/_container.html"){
<style>
    .fr{
                float: right;
                margin-right: 5px;
            }
            td input{
                width: 100%
            }
            .form-ahead{
               overflow: hidden;
               margin-bottom: 5px;
            }
            .head-title-h{
                text-align: center;
                margin-bottom: 10px;
            }
            .RecYear-div{
                float:right;
                text-align:center;
            }
            .form-group-block{
        padding: 5px;
        border: 1px solid #ccc
        }
        .addline{
            float:right;
            margin-bottom:10px;
        }
        .delline{
            float:right;
            margin-bottom:10px;
            margin-left:10px;
        }
        .img-formtip img{
           padding-left:30px;
        }
        .help-block{
        color:#a94442
    }
    li{
    list-style: none;
}
            </style>
<div class="row">
    <div class="col-sm-12">
        <div class="head-title-h">
            <h2>用水单位用水情况半年基础报表</h2>
        </div>

        <a href="#" class="btn btn-primary btn-sm delline">
            <span class="glyphicon glyphicon-minus">删除条目</span>
        </a>
        <a href="#" class="btn btn-primary btn-sm addline">
            <span class="glyphicon glyphicon-plus">增加条目</span>
        </a>

        <form class="myform" action="" id="form6">
            <!-- 表头 -->
            <div class="form-ahead">
                <div class="col-sm-4">
                    <label class="col-sm-12 col-form-label" for="UnitHead">填表单位名称（盖章）：</label>
                </div>
                <div class="col-sm-2 RecYear-div">
                    <label for="RecYear" class="col-sm-4 col-form-label" title="必填项"><i style="color:red">*</i>年份：</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control  col-sm-2" name="RecYear" id="RecYear" title=""
                            placeholder="">
                    </div>
                </div>
            </div>
            <form class="" action="">
                <div class="form-group row form-group-block">
                    <div class="col-sm-12">
                        <!-- table1 -->
                        <table class="table">
                            <thead>
                                <tr>
                                    <th scope="col">序号</th>
                                    <th scope="col" title="必填项"><i style="color:red">*</i>用户名 </th>
                                    <th scope="col" title="必填项"><i style="color:red">*</i>地址</th>
                                    <th scope="col">联系电话</th>
                                    <th scope="col" title="必填项"><i style="color:red">*</i>用水总量（m3）</th>
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                    <th scope="col" title="必填项"><i style="color:red">*</i>用途分类</th>
                                    <th scope="col" >所属行业</th>
                                    <th scope="col"title="必填项"><i style="color:red">*</i>所属镇街</th>
                                </tr>
                                <tr>
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                    <th scope="col" title="必填项"><i style="color:red">*</i>全年</th>
                                    <th scope="col" title="必填项"><i style="color:red">*</i>1-6月</th>
                                    <th scope="col" title="必填项"><i style="color:red">*</i>7-12月</th>
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                </tr>
                                </tr>
                            </thead>
                            <tbody class="tbody-aplus">

                                <br>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="col-sm-3">
                    <label class="col-sm-4 col-form-label" for="UnitHead" title="必填项"><i style="color:red">*</i>单位负责人：</label>
                    <div class="col-sm-8">
                        <input type="text" name="UnitHead" id="UnitHead" value="">
                    </div>
                </div>
                <div class="col-sm-3">
                    <label class="col-sm-4 col-form-label" for="Reporter" title="必填项"><i style="color:red">*</i>统计负责人：</label>
                    <div class="col-sm-8">
                        <input type="text" name="Reporter" id="Reporter" value="">
                    </div>
                </div>
                <div class="col-sm-3">
                    <label class="col-sm-4 col-form-label" for="Operater">填表人：</label>
                    <div class="col-sm-8">
                        <input type="text" name="Operater" id="Operater" value="${Operater}" title="可在“个人资料”进行修改" placeholder=""
                            disabled="disabled">
                    </div>
                </div>
                <div class="col-sm-3">
                    <label class="col-sm-4 col-form-label" for="Phone">联系电话：</label>
                    <div class="col-sm-8">
                        <input type="text" name="phone" id="Phone" value="${phone}" value="" title="可在“个人资料”进行修改"
                            placeholder="" disabled="disabled">
                    </div>
                </div>
            </form>

            </br>
            </br>
            </br>
            </br>

            <button type="button" id="submit" class="btn btn-info fr">全部提交</button>
            <button type="button" id="saveform" class="btn btn-primary fr">保存</button>
            <button type="button" id="exportform" class="btn btn-primary fr">导出</button>
            <button type="button" id="preview" class="btn btn-primary fr">预览</button>
            <a id='export_a' href=''></a>

    </div>
    <div>
        <ul>
            <li><strong>说明：</strong></li>
            <li>1.此表由供水公司填报，包括1-6月报表和7-12月报表，填报单位分别于每年的1月30日和7月30日前填报前半年度的半年基础报表并报送所属区节水主管部门。</li>
            <li>2.统计范围：年用水总量6万㎥以上的非居民用水户。</li>
            <li>3.用水总量：指各水源用水量之和（不含内部重复利用量）。</li>
                <li> 4.用途分类：包括工业、行政事业、经营服务、特种行业和其他用途。</li>
                    <li>5.所属行业：按《国民经济行业分类》（GB/T4754-2017）。	</li>
        </ul>
    </div>
     <!-- 弹窗选择 -->
     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">请勾选你所要提交的页面</h4>
                </div>
                <div class="modal-body checkpage">
                    <div>
                        <label class="checkbox-inline">
                            <input style="margin-top:0" type="checkbox" id="checkpage1" value="1"><span>用水单位基本信息</span>
                        </label>
                        <label class="checkbox-inline">
                            <input style="margin-top:0" type="checkbox" id="checkpage2" value="2"><span>节约用水年报</span>
                        </label>
                        <label class="checkbox-inline">
                            <input style="margin-top:0" type="checkbox" id="checkpage3" value="3"> <span>工业企业用水情况年报表</span>
                        </label>
                        <label class="checkbox-inline">
                            <input style="margin-top:0" type="checkbox" id="checkpage4" value="4"><span>技改年报</span> 
                        </label>
                        <label class="checkbox-inline">
                            <input style="margin-top:0" type="checkbox" id="checkpage5" value="5"><span>中水</span> 
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default closeDialog" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary submit_confirm">确认提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>
<script>
    $("#form6").bootstrapValidator({
        live: 'enabled', //验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
        excluded: [':disabled', ':hidden', ':not(:visible)'], //排除无需验证的控件，比如被禁用的或者被隐藏的
        fields: {
            RecYear: {
                validators: {
                    notEmpty: { //检测非空,radio也可用
                        message: '必填项'
                    },
                    regexp: { //正则验证
                        regexp: /^\d{4}$/,
                        message: '请输入四位纯数字'
                    }
                }
            },
            UnitHead: {
                validators: {
                    notEmpty: { //检测非空,radio也可用
                        message: '必填项'
                    },
                    stringLength: { //检测长度
                        min: 0,
                        max: 10,
                        message: '字符长度必须在0-10之间'
                    },
                }
            },
            Reporter: {
                validators: {
                    notEmpty: { //检测非空,radio也可用
                        message: '必填项'
                    },
                    stringLength: { //检测长度
                        min: 0,
                        max: 10,
                        message: '字符长度必须在0-10之间'
                    },
                }
            },
            UnitName:{
                validators: {
                    notEmpty: { //检测非空,radio也可用
                        message: '必填项'
                    },
                    stringLength: { //检测长度
                        min: 0,
                        max: 50,
                        message: '字符长度必须在0-50之间'
                    },
                }
            },
            UnitAddr:{
                validators: {
                    notEmpty: { //检测非空,radio也可用
                        message: '必填项'
                    },
                    stringLength: { //检测长度
                        min: 0,
                        max: 50,
                        message: '字符长度必须在0-50之间'
                    },
                }
            },
            Sum:{
                validators: {
                    notEmpty: { //检测非空,radio也可用
                        message: '必填项'
                    },regexp: { //正则验证
                            regexp: /^[0-9]*$/,
                            message: '请输入纯数字'
                        },
                }
            },FistHalf:{
                validators: {
                    notEmpty: { //检测非空,radio也可用
                        message: '必填项'
                    },regexp: { //正则验证
                            regexp: /^[0-9]*$/,
                            message: '请输入纯数字'
                        },
                }
            },SecHalf:{
                validators: {
                    notEmpty: { //检测非空,radio也可用
                        message: '必填项'
                    },regexp: { //正则验证
                            regexp: /^[0-9]*$/,
                            message: '请输入纯数字'
                        },
                }
            }
        }
    })
    //全部提交请求
    $("#submit").click(function () {
        var ajax = new $ax(Feng.ctxPath + '/halfusewater/updateCommit', function (data) {
            // Feng.success("请求成功!");
            console.log(data)
            console.log(data.length)
                if (data.code == 200) {
                    Feng.success(data.msg);
                } else {
                    Feng.error(data.msg);
                }
        }, function (data) {
            Feng.error("全部提交失败!");
        });
        ajax.set("halfusewaterId",JSON.stringify(["6"]));
        ajax.start();
    })

    var linetr3Arr = [
        "1", "2", "3", "4", "5", "6", "7", "8", "9",
    ]
    var linetrName = ["UnitName", "UnitAddr", "Tel", "Sum", "FistHalf", "SecHalf", "UseType", "GBIndustry",
        "BelongStreet"
    ]
    var linetr3Input = ""
    for (var i in linetr3Arr) {
        linetr3Input = linetr3Input + '<td><input name="' + linetrName[i] + '"></td>'
    }


    //exportform 导出
    $(document).on("click", "#exportform", function () {
        $("#export_a").attr("href", Feng.ctxPath + '/halfusewater/dlExcell')
        $("#export_a")[0].click()
    })

    //saveform
    //定义serializeObject方法，序列化表单
    $.fn.serializeObject = function () {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };

    //点击提交
    $("#saveform").click(function () { //非submit按钮点击后进行验证，如果是submit则无需此句直接验证
        $("#form6").bootstrapValidator('validate'); //提交验证
        if ($("#form6").data('bootstrapValidator').isValid()) { //获取验证结果，如果成功，执行下面代码
            var form = $(".myform").serializeObject();
            console.log(form)
            var formcorrect = []
            for (var i = 0; i < countline; i++) {
                if (countline == 1) {
                    formcorrect.push({
                        UnitName: form["UnitName"],
                        UnitAddr: form["UnitAddr"],
                        Tel: form["Tel"],
                        Sum: form["Sum"],
                        FistHalf: form["FistHalf"],
                        SecHalf: form["SecHalf"],
                        UseType: form["UseType"],
                        GBIndustry: form["GBIndustry"],
                        RecYear: form["RecYear"],
                        UnitHead: form["UnitHead"],
                        Reporter: form["Reporter"],
                        BelongStreet: form["BelongStreet"],
                    })
                } else {
                    formcorrect.push({
                        UnitName: form["UnitName"][i],
                        UnitAddr: form["UnitAddr"][i],
                        Tel: form["Tel"][i],
                        Sum: form["Sum"][i],
                        FistHalf: form["FistHalf"][i],
                        SecHalf: form["SecHalf"][i],
                        UseType: form["UseType"][i],
                        GBIndustry: form["GBIndustry"][i],
                        BelongStreet: form["BelongStreet"][i],
                        RecYear: form["RecYear"],
                        UnitHead: form["UnitHead"],
                        Reporter: form["Reporter"]
                    })
                }

            }
            console.log(formcorrect)
            var ajax = new $ax(Feng.ctxPath + '/halfusewater/pushMsg', function (data) {
                    if (data.code == 200) {
                        Feng.success(data.msg);
                    } else {
                        Feng.error(data.msg);
                    }
            }, function (data) {
                Feng.error("请求失败!");
            });
            ajax.set("json", JSON.stringify(formcorrect));
            ajax.start();
        }  else{
            //解决table校验提示重复问题
            Feng.error("表单有漏填或填写格式错误");//获取验证结果，失败
        }
    });
    $(document).on("click", "#preview", function () {
        window.open(Feng.ctxPath + '/halfusewater/showPDF', "_blank",
            "top=200,left=200,height=600,width=800,status=yes,toolbar=1,menubar=no,location=no,scrollbars=yes"
        );

    })
</script>
<script src="${ctxPath}/static/modular/fsjs/halfusewater/halfusewater.js"></script>
<script>
      $(document).keydown(function(event){
          switch(event.keyCode){
             case 13:return false; 
             }
      });
    //返回的数据data
    var dataLength
    var daterecive
    var ajax = new $ax(Feng.ctxPath + '/halfusewater/getTemp', function (data) {
        console.log(data)
        dataLength = data.length
        daterecive = data
    }, function (data) {
        // Feng.error("请求失败!" + data.responseJSON.message + "!");
    });
    ajax.start();

    //addline 增加条目
    if (typeof (dataLength) == "undefined") {
        dataLength = 1
    }
    var countline = dataLength

    appendline() //init append                         
    function appendline() {
        for (var i = 0; i < countline; i++) {
            $(".tbody-aplus").append('<tr class="totalcount" index="' + i + '"></tr>')
        }
        $(".totalcount").append(linetr3Input)
        $(".totalcount").each(function (index) {
            index *= 1
            $(this).prepend('<td>' + (index + 1) + '</td>')
        })
    }

    $(".addline").click(function () {
        countline++;
        $(".tbody-aplus").append('<tr class="totalcount" index="' + countline + '"></tr>')
        $(".totalcount:last").append(linetr3Input)
        $(".totalcount:last").prepend('<td>' + countline + '</td>')
        console.log(countline)
        dropdownList(1)
        $("select[name=UseType]:last").attr("value", "1") //select初始value值
        $("select[name=GBIndustry]:last").attr("value", "A01") //select初始value值
    })
    //delline 删除条目
    $(".delline").click(function () {
        countline--;
        // $(".tbody-aplus").append('<tr class="totalcount" index="' + countline + '"></tr>')
        $(".totalcount:last").remove();
        console.log(countline)
    })
    dropdownList() //init
    function dropdownList(type) {
        // //input 显示下拉选择项
        var optStr1 = ""
        optArr1 = ["工业", "行政事业", "经营服务", "特种行业", "其他行业"]
        for (var i in optArr1) {
            i *= 1
            optStr1 = optStr1 + '<option value="' + (i + 1) + '">' + optArr1[i] + '</option>'
        }
        //处理返回的行业数据字典
        var industryCollect
        var ajax = new $ax(Feng.ctxPath + '/basemsg/getHangyeCode', function (data) {
            // Feng.success("请求成功!");
            industryCollect = data
        }, function (data) {
            // Feng.error("请求失败!" + data.responseJSON.message + "!");
        });
        ajax.start();
        var industryCollectCode = []
        var industryCollecthangye = []
        for (var i in industryCollect) {
            industryCollectCode.push(industryCollect[i].code)
            industryCollecthangye.push(industryCollect[i].hangye)
        }
        var industryStr=""
        for (var i in industryCollectCode) {
            i *= 1;
            industryStr = industryStr + '<option value="' + industryCollectCode[i] + '">' +
                industryCollecthangye[i] + '</option>'
        }
        $(".totalcount").each(function (index) {
            if (type == 1) { //增加
                $($(".totalcount:last").children("td")[7]).html('<select style="width:100%" name="UseType">' +
                    optStr1 +
                    '</select>')
                $($(".totalcount:last").children("td")[8]).html('<select style="width:100%" name="GBIndustry">' +
                    industryStr +
                    '</select>')
            } else { //初始
                $($(this).children("td")[7]).html('<select style="width:100%" name="UseType">' + optStr1 +
                    '</select>')
                $($(this).children("td")[8]).html('<select style="width:100%" name="GBIndustry">' + industryStr +
                    '</select>')
            }
        })
    }

    //数据填充 func
    initdata() //渲染数据
    function initdata() {
        if (typeof (daterecive) == "undefined") {
        } else {
            var returnObjArr = []
            for (var i in daterecive[0]) {
                returnObjArr.push(i) //首字母是小写
            }
            console.log($(".totalcount"))
            for (var i in returnObjArr) {
                var currentObj = returnObjArr[i]
                //首字母小写转大写
                currentObj_A = currentObj.replace(currentObj[0], currentObj[0].toUpperCase());
                for (var j in daterecive) { //显示值
                    $($('input[name=' + currentObj_A + ']')[j]).attr('value', daterecive[j][currentObj]);
                }
            }
            //selector 值的返回
            var selectorUseType = []
            var selectorGBIndustry = []
            for (var i in daterecive) {
                selectorUseType.push(daterecive[i].useType)
                selectorGBIndustry.push(daterecive[i].gBIndustry)
            }
            $("select[name=UseType]").each(function (i) {
                selectorUseType_bingo = selectorUseType[i].replace(/\s*/g, "")
                $(this).val(selectorUseType_bingo)
            })
            $("select[name=GBIndustry]").each(function (i) {
                selectorGBIndustry_bingo = selectorGBIndustry[i].replace(/\s*/g, "")
                $(this).val(selectorGBIndustry_bingo)
            })
        }
    }
</script>
@}